<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div id="app2">
      <p v-for="item in items" :key="item.id">{{item.message}}</p>
      <button class="btn" @click="btn2Click()">动态赋值</button><br />
      <button class="btn" @click="btn3Click()">为data新增属性</button>
      <button @click="addItem">adddata</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>
    <script>
      var vm2 = new Vue({
        el: "#app2",
        data: {
          items: [
            { message: "Test one", id: "1" },
            { message: "Test two", id: "2" },
            { message: "Test three", id: "3" },
          ],
        },
        methods: {
          btn2Click: function () {
            Vue.set(this.items, 0, { message: "Change Test", id: "10" });
          },
          btn3Click: function () {
            var itemLen = this.items.length;
            Vue.set(this.items, itemLen, {
              message: "Test add attr",
              id: itemLen,
            });
          },
          addItem() {
            console.log(111);
            // this.items.push({ message: "Test three2", id: "4" });
          },
        },
      });
    </script>
  </body>
</html>
